<eda-dialog [inject]="dialog">
  
  <div body class="grid h-100 p-5">

    <div class="col-7" style="background-color: var(--panel-color); width: 90%; height: 15vh;">
      <panel-chart *ngIf="display" #PanelChartComponent [props]="panelChartConfig" class="component"></panel-chart>
    </div>

    <div class="col-4 col-offset-1">

        <div class="col-12">
            <h6 i18n="@@colorsChartH6" class="custom-border-b1">
                Colores
            </h6>
            <div class="grid chart-color-selection">
                <ng-container *ngFor="let serie of series; let i = index">
                    <div class=" col-6 ">
                        <input type="text" pInputText style="width: 40%" [value]="serie.label" disabled="true" [style.border-color]="serie.border" />
                        <p-colorPicker [(ngModel)]="serie.bg" (onChange)="handleInputColor(serie)" format="hex" appendTo="body"></p-colorPicker>
                        <input type="text" pInputText class="eda-color-pick" [(ngModel)]="serie.bg" (input)="handleInputColor(serie)" minlength="7" >
                    </div>
                </ng-container>
            </div>
        </div>

    </div>

    <div class="col-12 mt-5">
      <h6 i18n="@@kpiAlertH6" class="custom-border-b1">
        Generar alerta
      </h6>
      <div class="grid">
        <div class="col-3">
          <h6>Valor</h6>
          <p>{{alertInfo}}</p>
          <div class="chart-color-selection">
            <div class="mb-1">
              <input type="number" [(ngModel)]="value" pInputText style="width: 40%" />
            </div>

          </div>
        </div>
        <div class="col-2">
          <h6 i18n="@@kpiGreatSmallEqualH6">
            Operador
          </h6>
          <div class="mb-1">
            <div class="p-field-radiobutton">
              <p-radioButton name="operand" value="<" [(ngModel)]="operand" inputId="operand1"></p-radioButton>
              <label for="operand1">&nbsp; &lt; </label>
            </div>
            <div class="p-field-radiobutton">
              <p-radioButton name="operand" value="=" [(ngModel)]="operand" inputId="operand2"></p-radioButton>
              <label for="operand2">&nbsp; = </label>
            </div>
            <div class="p-field-radiobutton">
              <p-radioButton name="operand" value=">" [(ngModel)]="operand" inputId="operand3"></p-radioButton>
              <label for="operand3">&nbsp; &gt; </label>
            </div>

          </div>
        </div>
        <div class="col-2">
          <h6 i18n="@@colorKpiH6">
            Color
          </h6>
          <div class="chart-color-selection">
            <div class="mb-1">
              <input type="text" [(ngModel)]="color" pInputText style="width: 40%" />
              <p-colorPicker [(ngModel)]="color" appendTo="body"></p-colorPicker>
            </div>
          </div>
        </div>
        <div class="col-4">
          <h6 i18n="@@kpiAlerts">
            Alertas
          </h6>
          <ul>
            <li *ngFor="let item of alerts">
              <div class="wrap-alert">

                <i  *ngIf="canIRunAlerts" class="fa fa-envelope" style="cursor: pointer; margin-top: 2px;"
                  (click)="openConfigDialog($event, item)" [pTooltip]="ptooltipViewAlerts"></i> &nbsp;&nbsp;
                &nbsp;&nbsp;
                <span class="dot" [ngStyle]="{'background-color':item.color, 'marginTop':'3px'}"></span>
                &nbsp; KPI &nbsp; {{item.operand}} &nbsp;
                {{ item.value | number : '1.0-2' : 'es'}} &nbsp;
                <i class="fa fa-close" style="color: #c0555e; cursor: pointer; margin-top: 2px;"
                  (click)="deleteAlert(item)"></i>

              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="col-2">
      <button i18n="@@addAlert" pButton class="btn-sm btn-secondary" i18n-title="@@addAlert" title="Añadir alerta"
        (click)="addAlert()" [disabled]="!color || !operand" label="Añadir alerta">
      </button>
    </div>
  </div>

  <div footer>
    <div class="ui-dialog-buttonpanel ui-widget-content ui-helper-clearfix text-right">
      <button type="submit" pButton (click)="saveChartConfig()" icon="fa fa-check" class="p-button-raised p-button-success"
        i18n-label="@@guardarButton" label="Confirmar" id="eda_chart_dialog_confirmar">
      </button>
      <button type="button" pButton (click)="closeChartConfig()" icon="fa fa-times" class="p-button-raised p-button-danger"
        i18n-label="@@cancelarButton" label="Cancelar">
      </button>
    </div>
  </div>

</eda-dialog>

<!-- Overlay kpi mailing config-->
<p-overlayPanel #mailConfig [appendTo]="'body'" [dismissable]="false">
  <ng-template pTemplate>
    <h6 i18n="@@MailSending" style="font-weight:bold;">
      Envío de alertas por mail </h6>
    <div class="grid" style="max-width: 60em; ">
      <div class="col-3">


        <h6 i18n="@@SendMailEvery"> Enviar mail de alerta cada: </h6>

        <div class="col-12" style="margin-top: -0.4em;">
          <p-inputNumber [(ngModel)]="quantity"></p-inputNumber>
        </div>
        <div class="col-12">
          <p-radioButton name="groupname" value="days" [label]="daysSTR" [(ngModel)]="units">
          </p-radioButton>
        </div>
        <div class="col-12" *ngIf="units==='days'">
          <p i18n="@@at"> A las </p>
          <p-calendar [timeOnly]="true" [(ngModel)]="hours"></p-calendar>
        </div>
        <div class="col-12">
          <p-radioButton name="groupname" value="hours" [label]="hoursSTR" [(ngModel)]="units">
          </p-radioButton>
        </div>
      </div>

      <div class="col-5">


        <h6 i18n="@@SendMailWho"> Destinatarios </h6>
        <div>
          <p-multiSelect [(ngModel)]="selectedUsers" [options]="users" [style]="{width: '80%'}">
          </p-multiSelect>
        </div>

      </div>

      <div class="col-4">

        <h6 i18n="@@SendMailWhat"> Contenido del mail: </h6>

        <textarea rows="8" cols="30" pInputTextarea autoResize="autoResize" [(ngModel)]="mailMessage"></textarea>

      </div>

      <div class="col-12"> 
        <h6 *ngIf="!enabled" i18n="@@noMail">Sin alertas de correo</h6>
        <h6 *ngIf="enabled" i18n="@@opcionMail">Enviar per email</h6>
        <p-inputSwitch id="switchCache" class="col-1" [(ngModel)]="enabled" tooltipPosition="left">
        </p-inputSwitch>
      </div>

      <div class="col-12">
        <button type="submit" pButton icon="fa fa-check" class="p-button-raised p-button-success" i18n-label="@@guardarButton"
          (click)="saveMailingConfig()" label="Confirmar" [disabled]="disableMailConfirm()" style="margin-right: 4px;">
        </button>
        <button type="button" pButton icon="fa fa-times" class="p-button-raised p-button-danger" i18n-label="@@cancelarButton"
          label="Cancelar" (click)="closeMailingConfig()">
        </button>

      </div>

    </div>

  </ng-template>
</p-overlayPanel>